/**
 * @class Vector.VML.Line
 * @extends Ext.ux.Vecotr.Line
 * Simple Vector Line class
 * @cfg {String} Id optional to identify the line
 * @cfg fromx fromy beginning point of line
 * @cfg tox toy end point of line
 * @cfg {Number} strokeweight width of line
 * @cfg {String} strokecolor color of line
 * @constructor
 * Create a new line
 * @param {String/HTMLElement/Element} renderTo The element to append the button to
 * @param {Object} config The config object
 */
Vector.VML.Line = function(config){
	this.lineTemplate = new Ext.Template('<v:line id={id} ' +
      'stroke=true strokecolor="{strokecolor}" strokeweight="{strokeweight}" ' +
      'style="position:relative;left:0px;top:0px;height:{height};width:{width}" coordorigin="0,0" ' +
      'to="{tox},{toy}" from="{fromx},{fromy}"><v:line>').compile();
	Vector.VML.Line.superclass.constructor.call(this);
	Ext.apply(this.config,config.opt);
	Ext.apply(this, config);

}
Ext.extend(Vector.VML.Line, Vector.Line, {
	draw: function(o){
		if(!o.id){o.id=Ext.id();}
		Ext.applyIf(o,this.config);
		debugger;
//		if(!o.strokeweight){o.strokeweight=this.strokeweight;}
//		if(!o.stroke){o.stroke=this.stroke;}
		this.lineTemplate.append(this.parent, o, true);
	}
});
/**
 * @class Vector.VML.Polyline
 * @extends Ext.util.Observable
 * Simple Vector PolyLine class
 * @cfg {Number} strokeweight width of line
 * @cfg {Array} pts x and y pairs
 * @cfg {String} strokecolor color of line
 * @constructor
 * Create a new line
 * @param {String/HTMLElement/Element} renderTo The element to append the button to
 * @param {Object} config The config object
 */
Vector.VML.Polyline = function(config){
	this.polyTemplate = new Ext.Template('<v:polyline id="{id}" ' + 
        'filled=false stroke=true strokecolor="{stroke}" strokeweight="{strokeweight}" Points="{points}"></v:polyline>').compile();
	Vector.Polyline.superclass.constructor.call(this);
	Ext.apply(this.config.config.opt);
	Ext.apply(this,config);
	
}
Ext.extend(Vector.VML.Polyline, Vector.Polyline, {
	draw: function(o){
		if(!o.id){o.id=Ext.id();}
		Ext.applyIf(o,this.config);
		this.polyTemplate.append(this.parent, o, true);
	}
});   
/**
 * Simple Vector Rectangle class
 * @class Vector.VML.Box
 * @extends Ext.util.Observable
 * @cfg {Number} strokeweight width of line
 * @cfg {String} strokecolor color of line
 * @constructor
 * @param {String/HTMLElement/Element} renderTo The element to append the button to
 * @param {Object} config The config object
 */
Vector.VML.Box = function(config){
	this.boxTemplate = new Ext.Template('<v:rect id="{id}" style="position:relative;height:{height};width:{width}" ' +
			'fillcolor="{fillcolor}" strokecolor="{strokecolor}" strokeweight="{strokeweight}" >' +
			'<v:shadow on={shadow} />' +
			'<v:textbox style="v-text-anchor:middle-center;height:20px;margin:0px 0px 0px 0px;font:10pt arial">{text}</v:textbox>' + 
			'</v:rect>').compile();
	Vector.VML.Box.superclass.constructor.call(this);
	Ext.apply(this.config,config.opt);
	Ext.apply(this, config);
}
Ext.extend(Vector.VML.Box, Vector.Box, {
    draw: function(o){
		if(!o.id){o.id=this.id;}
		Ext.applyIf(o,this.config);
		this.boxTemplate.append(this.parent, o, true);
	}
});   
/**
 * @class Ext.Vector.RoundBox
 * @extends Ext.Vector.Box
 * @constructor
 * @param {String/HTMLElement/Element} renderTo The element to append the button to
 * @param {Object} config The config object
 */
Vector.VML.RoundBox = function(config){
	    this.boxTemplate = new Ext.Template('<v:roundrect id="{id}" ' +
           ' class={cls} style="position:relative;width:{width};height:{height};' +
          'left:{left};top:{top};" fillcolor="{fillcolor}" strokecolor={strokecolor} strokeweight={strokeweight} >' +
           '<v:shadow on={shadow} />' +
         '<v:textbox v-text-anchor=middle style="height:20px;margin:0px 0px 0px 0px;font:8pt arial">{text}</v:textbox>' +
           '</v:roundrect>').compile();
       Vector.VML.RoundBox.superclass.constructor.call(this);
	   	Ext.apply(this.config,config.opt);
		Ext.apply(this, config);   	   
   }
Ext.extend(Vector.VML.RoundBox, Vector.Box, {
    draw: function(o){
		if(!o.id){o.id=Ext.id();}
		Ext.applyIf(o,this.config);
		this.boxTemplate.append(this.parent, o, true);
	}
});   

Vector.VML.Group = function(config){
   Ext.apply(this,config); 
   this.groupTemplate = new Ext.DomHelper.Template('<v:group ' +
      'style="position:relative;left:{left};top:{top};width:{width};height:{height};" ' +
      'coordsize="{width},{height}" coordorigin="0,0" id={id}>').compile();
	Vector.VML.Group.superclass.constructor.call(this);
} 
Ext.extend(Vector.VML.Group,Vector.Group,{
	render: function(){
		try{
			if(!this.id){this.id = Ext.id();}
			this.groupTemplate.append(this.parent, this);
		}catch(e){
			Ext.dump(e);
		}
	}
});
Vector.VML.Canvas = Ext.extend(Vector.VML.Group,{});
/*
    
*/
Vector.VML.Image = function(config){
    this.opacity='1.0';
    this.stroke='false';
    this.strokecolor='white';
    this.strokeweight='1';
    this.grayscale='false';
    this.width=16;
    this.height=16;
    Ext.apply(this,config);
    //can have href and target
    this.ImageTemplate= new Ext.DomHelper.Template('<v:image style="position:relative;width:{width};height:{height};top:{top};left:{left}"'+
                                                        ' src={src} grayscale={grayscale} id={id}/>').compile();
                       
   this.el = this.ImageTemplate.append(Ext.get(renderTo).dom, this, true);
   this.getEl = function(){
      return this.el;      
   }      
}

